<template>
  <div class="manage wrap scrollBar">
    <h1>用户管理</h1>
    <div class="search">
      <div class="left">
        <el-input
          size="small"
          placeholder="输入账户进行查找"
          suffix-icon="el-icon-search"
          v-model="searchAccount"
          :disabled="tableData.length == 0 ? true : false"
        >
        </el-input>
      </div>
      <div class="right">
        <el-button type="add" @click="addAccount">添加账户</el-button>
        <el-button
          type="delete"
          :disabled="tableData.length == 0 ? true : false"
          @click="deleteAll"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="listData">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="正在加载,请稍后..."
      >
        <template slot="empty">
          <div class="emptyData">
            <img src="~@/assets/images/status/nodata.png" alt="" srcset="" />
            <div style="margin-left: 20px">暂无数据</div>
          </div>
        </template>
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="65"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="账户"
          min-width="130"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          min-width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          min-width="120"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="150"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lastLoginTime"
          label="上次登录时间"
          min-width="150"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <img
              src="~@/assets/images/iconAll/audit.png"
              alt=""
              style="margin-right: 20px"
            />
            <img src="~@/assets/images/iconAll/delete.png" alt="" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 翻页 -->
    <div class="pagination" v-if="tableData.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next,jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
    <!-- 添加账户 -->
    <el-dialog
      title="添加账户"
      :visible.sync="isAdd"
      width="550px"
      center
      top="20vh"
      @close="closeAdd"
      :close-on-click-modal="false"
    >
      <div class="addBoxCon">
        <el-form :model="addUser" ref="addUser" :rules="addRules">
          <el-form-item
            label="账户："
            :label-width="formLabelWidth"
            prop="userAccount"
          >
            <el-input
              placeholder="请输入账号"
              v-model="addUser.userAccount"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码："
            :label-width="formLabelWidth"
            prop="newPass"
          >
            <el-input
              placeholder="请输入密码"
              v-model="addUser.newPass"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="角色："
            :label-width="formLabelWidth"
            prop="userRole"
            style="margin-botton: 0"
          >
            <el-select
              v-model="addUser.userRole"
              placeholder="请选择角色"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('addUser')">添加</el-button>
      </span>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog
      :title="title"
      :visible.sync="isTrue"
      width="500px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="~@/assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="content">删除该数据后不能恢复，是否确定删除!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="deleteT(1)">取消</el-button>
        <el-button type="shi" @click="deleteT(2)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/title.less"; //引入
import "@/assets/css/list.less";
export default {
  name: "userManagement",
  data() {
    return {
      title: "提示",
      searchAccount: "",
      multipleSelection: [], //选中的数据
      delarr: [], //存放删除的数据
      tableData: [
        {
          account: "2016-05-01",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-08",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-06",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-07",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-08",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-06",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-07",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-08",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-06",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
        {
          account: "2016-05-07",
          password: "1231231231",
          role: "管理员",
          createTime: "2021-8-13 13:22:07",
          lastLoginTime: "2021-8-13 13:22:07",
        },
      ],
      // tableData:[],
      currentPage: 1, // 页码数
      totals: 200,
      pageSize: 10,
      pageNumber: 1,
      loading: false,
      isAdd: false,
      formLabelWidth: "140px",
      addUser: {
        userAccountL: "", //账户
        newPass: "", //密码
        userRole: "", //角色
      },
      options: [
        {
          value: "1",
          label: "管理员",
        },
      ],
      addRules: {
        userAccount: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9]{6,20}$/,
            message: "账号符且为数字,字母或组合的6-20个字符",
            trigger: "blur",
          },
        ],
        newPass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9_.]{6,20}$/,
            message: "密码符且为数字,字母,点,下划线的6-20个字符",
            trigger: "blur",
          },
        ],
        userRole: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
      isTrue: false,
    };
  },
  methods: {
    // 添加账户
    addAccount() {
      this.isAdd = true;
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "添加成功",
            offset: "150",
            duration: "1500",
          });
          // 清楚验证
          this.$nextTick(() => {
            this.$refs[formName].resetFields();
          });
          this.isAdd = false;
        } else {
          return false;
        }
      });
    },
    // 批量删除
    deleteAll() {
      let length = this.multipleSelection.length;
      if (length > 0) {
        this.isTrue = true;
        console.log(this.multipleSelection);
        for (var i = 0; i < length; i++) {
          // this.delarr.push(this.multipleSelection[i].articleIdStr);
        }
      } else {
        this.$message({
          type: "error",
          message: "请选择需要删除的数据!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    deleteT(type) {
      if (type === 1) {
        this.isTrue = false;
        this.$message("已取消!");
        this.$refs.multipleTable.clearSelection();
      } else {
        this.isTrue = false;
        this.$message({
          type: "success",
          message: "删除成功!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    // 选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange: function (val) {
      this.pageNumber = 1;
      this.pageSize = val;
      this.currentPage = 1;
      // this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.pageNumber = val;
      // this.getList();
    },
    //清楚验证
    closeAdd: function () {
      this.$refs.addUser.resetFields();
    },
  },
};
</script>

<style lang='less'>
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    height: 12px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
  }
}
.addBoxCon {
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-input--small .el-input__inner {
    font-size: 13px;
  }
  .el-form-item__label {
    font-size: 14px;
  }
  .el-input--small .el-input__inner {
    width: 270px;
  }
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: "*";
  }
}
.el-dialog__title,
.header-title {
  font-size: 14px;
  color: #4c5967;
  font-weight: 600;
}
</style>
